Embed "PrintSpirit" into Third-Party Websites for Quick Label Printing

The label editor provided by "PrintSpirit" allows you to edit a richly illustrated label by dragging and dropping, and immediately print it out on desktop or mobile printers. This significantly reduces the tedious work of developing printing programs, allowing "programmers" to basically say goodbye to the endless loop of writing code - printing test pages - modifying code - printing test pages again. Even the most complex labels can usually be done in one go, slightly improving their tough lives.

However, only a lazy "programmer" is a "good programmer". To reduce their workload, their imagination is always limitless. Recently, a website client requested, since designing labels has become so simple, could it be possible for the end-users to design the labels themselves, completely freeing them up, is that possible?

Yes, of course! "PrintSpirit" is originally a free and open label design platform. If "end-users" register on "PrintSpirit", they can design labels themselves, what's so hard about that? ....

But... but... the client said, it might not be that simple:

For example, end-users can indeed design labels themselves on "PrintSpirit", but how to establish a connection with the third-party website? Must they input a 36-character long label ID, which is against human nature?

Also, it's said that the user is God. Although designing labels is quite simple, and even a bit fun for literary types, but asking them to register on the client's website, and then register again on "PrintSpirit", might scare God away?

Another example, can the labels designed by end-users be isolated and kept confidential?

...

These requirements are actually not complicated. "PrintSpirit" provides enterprise version features. As long as you register an enterprise account, you can embed the "PrintSpirit" label designer into your own website, and the above problems will be solved. How to achieve this?

Principle

Let's talk about the principle first.

For enterprise version users, "PrintSpirit" provides the following APIs:

Third-party websites can obtain all label lists of the enterprise through the get-label-list API. An additional parameter subclass is required when calling, which is a custom classification identifier, most commonly used to distinguish end-users under the enterprise. With these APIs, third-party enterprise websites can list various label templates as needed, further realizing the selection of print templates, display previews, editing, etc.

If a third-party website needs to edit a label, jump to (or embed in an IFRAME) https://www.printspirit.cn/third-edit?token=__token__&subclass=__subclass__&tpid=__tpid__, to open the editor. Three parameters are required: subclass / tpid, if tpid is not set, it means to create a new one. The token is obtained through get-access-token.

If a third-party website needs to save label data on its own website, it can use the get-label-content API to obtain the content of the label.

If a third-party website needs to preview labels on its own website, it can use <img src="http://www.printspirit.cn/utils/thumb?id=tp_id"/>

Note: To use third-party APIs, please contact the customer to enable API function after registering an account on "PrintSpirit". For testing, you can use the third_test account, the password is also third_test.

Program Example

Below is an example in PHP. The program includes three files: spirit.php defines related functions, list.php displays the template list, edit.php edits the template, explained below.

spirit.php

<?php
define("SPIRIT_HOST", "https://www.printspirit.cn");
define("UID",  "third_test");
define("PASS", "third_test");

function getAccessToken($uid, $pass) {

	$apcuAvailabe = function_exists('apcu_enabled') && apcu_enabled();
	
	if($apcuAvailabe){
		$access_token = apcu_fetch('access_token');
		$expirt_time = apcu_fetch('expirt_time');
		if ( $access_token && $expirt_time > time() ) return $access_token;
	}

	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-access-token?userid=$uid&passwd=$pass"));

	if ($rc!=NULL && $rc->rc=='OK') {
		if($apcuAvailabe){
			apcu_store('access_token', $rc->token);
			apcu_store('expirt_time',  time() + $rc->expirt);
		}
		return $rc->token;
	}	
	die("无法获取TOKEN:".$rc->errmsg);
}

function getList($subclass="") {
	$token = getAccessToken(UID, PASS);
	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-label-list?token=${token}&subclass=${subclass}"), true);
	if ($rc!=NULL && $rc['rc']=='OK') 	return $rc['data'];
	return [];
}

function getContent($tpid) {
	$token = getAccessToken(UID, PASS);
	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-label-content?token=${token}&tpid=${tpid}"), true);
	if ($rc!=NULL && $rc['rc']=='OK') return $rc['data'];
	return "";
}

function get_edit_url($subclass, $tpid="") {
	$token = getAccessToken(UID, PASS);
	return SPIRIT_HOST . "/third-edit?subclass=${subclass}&tpid=${tpid}&token=${token}";	
}

This file defines 4 functions:

  • getAccessToken() Get the access token for the API, calling any API requires access_token. Note that the access_token should be cached to avoid repeated acquisition within the validity period. In the sample program, if PHP-APCu is installed, the token will be automatically cached.
  • getList($subclass) Returns the list of print templates for the specified category $subclass. If no category is specified, all print templates under the account are returned.
  • get_edit_url($subclass, $tpid) Get the URL address for editing the template. If $tpid is empty, create a new template. $subclass specifies the save category. You can directly jump to this address or embed it in an IFRAME.
  • getContent($tpid) Get template content

list.php

list.php calls getList() to get all print templates of the current user and displays them in a list. The thumbnail is displayed using /utils/thumb. There is an edit button behind each template, and a new button at the bottom calls edit.php.

<?php
require_once("spirit.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A Test Client for Spirit</title>
  </head>
  <body>
  	<table style="width:50%; margin: 0 auto; border:1px solid #888">
  	<tr><th>Label Name</th><th>Subclass</th><th>Thumbnail</th></tr>
  	<?php 
			$lst = getList();
  		foreach( $lst as $l) {
	  		echo "<tr>";
	  		echo "<td>${l['name']}</td>";
	  		echo "<td>${l['subclass']}</td>";
	  		/*Display thumbnail*/
	  		echo "<td><img height='100px' src='" . SPIRIT_HOST . "/utils/thumb?id=${l[id]}' /></td>";
	  		echo "<td><a href='edit.php?subclass=${l['subclass']}&tpid=${l['id']}"'><button>Edit(Embed)</button></a>"
	      	echo "<a href='<?="edit.php?subclass=${l['subclass']}&tpid=${l['id']}&target=new"'><button>Edit(Jump)</button></a></td>"
	  		echo "</tr>\n";
	  	}
  	?>	
  	</table>
  	<div style="width:50%;margin:0 auto;padding:5px;text-align:right">
  		<a href='edit.php?subclass="user1"'><button>New Label</button></a>
  	<div>
  </body>
</html>

edit.php

Edit the print template, get the edit URL through get_edit_url(subclass, tpid), you can directly jump, or embed in an IFRAME. If tpid is empty, create a new template. subclass specifies the save subclass, in the example, all are saved to user1, the actual program can be set to the current logged-in user of the third-party website.

<?php
require_once("spirit.php");
$url=get_edit_url($_GET['subclass'], $_GET['tpid']);

if (!empty($_GET['target']) && $_GET['target']=='new') {
    header("Location: " . $url);
    return;
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
  <div class="iframe">
     <iframe src="<?php echo $url?>" />
  </div>
  </body>
</html>

To experience the effect of embedding into a third-party website, please download Third-Party Website Simulation Program. This program establishes a simulation website on the local machine, Through the third-party API of "PrintSpirit", it realizes label editing, printing, and other functions. At the same time, the program provides source code, including example programs in GO, PHP languages, for reference when embedding "PrintSpirit". See the use of Simulated Third-Party Website Program for details.

Leave Your Message

login